window.a_1_3_1_1_1_dom=null;//表示菜单的dom
window.a_1_3_1_1_1_vue=null;//表示菜单的dom
window.a_1_3_1_1_1_show_menu=function(obj){

let x=null;
let y=null;
if(obj.event){
    x=obj.event.clientX;
    y=obj.event.clientY;
}else{
    x=obj.x;
    y=obj.y;
}
let deepcopy_data={"menu_dct":obj.menu_dct,'keys':Object.keys(obj.menu_dct).sort(),x:x,y:y}
//如果菜单不存在则创建一个菜单
if(!a_1_3_1_1_1_dom){
let new_dom=document.createElement('a_1_3_1_1_1_menu');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
new_dom.setAttribute(':deepcopy_data','deepcopy_data');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:deepcopy_data}};
// 将这个 div 添加到 document.documentElement（即 <html> 元素）  
document.documentElement.appendChild(new_dom);
//渲染vue组件
window.a_1_3_1_1_1_vue=new Vue(vue_dct);
window.a_1_3_1_1_1_dom=new_dom;
document.addEventListener('click', function(event) {
    // Check if the clicked element is not doma and not a descendant of doma
    if (!window.a_1_3_1_1_1_vue.$refs.ref_obj.$el.contains(event.target)) {
        window.a_1_3_1_1_1_vue.$refs.ref_obj.show_flag=false;
    }
});
}else{
    window.a_1_3_1_1_1_vue.$refs.ref_obj.data.keys=Object.keys(obj.menu_dct).sort();
    window.a_1_3_1_1_1_vue.$refs.ref_obj.data.menu_dct=obj.menu_dct;
    window.a_1_3_1_1_1_vue.$refs.ref_obj.data.x=x;
    window.a_1_3_1_1_1_vue.$refs.ref_obj.data.y=y;
    window.a_1_3_1_1_1_vue.$refs.ref_obj.data.refresh();
    window.a_1_3_1_1_1_vue.$refs.ref_obj.show_flag=true;

}

}


Vue.component2('a_1_3_1_1_1_menu', {  
    template: `
       
        <div class="a_1_3_1_1_1_sub_menu" :style="lefttop" :key='refresh' v-show='show_flag'>
            <div class="a_1_3_1_1_1_sub_menu_item" ref="text"v-for="(key,indexr) in data.keys" @click="click($event,key)">
                {{data.menu_dct[key].text}}
            </div>
        </div>
`,
data(){
    return{
        show_flag:true,
        refresh:'1',
        lefttop:'color:red',
        data:{
            menu_dct:{
            },
            keys:{},
            x:'33',
            y:'33',
        }
    }
},
watch:{
    
    "data.x":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.y":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
},
methods:{
    
    click:function(event,key){
        this.data.menu_dct[key].click(event);
        this.show_flag=false;
    },
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'};
_this.data.keys=_this.deepcopy_data.keys;
_this.data.x=_this.deepcopy_data.x;
_this.data.y=_this.deepcopy_data.y;
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})

// a_1_3_1_1_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     x:444,y:444,
// }
// )

// a_1_3_1_1_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"3删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"4查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     event:{clientX:333,clientY:555}
// }
// )